<div ng-controller="heatmap" ng-init="init()">
    <style>
        /* disable text selection */
        svg *::selection {
            background: transparent;
        }
        svg *::-moz-selection {
            background: transparent;
        }
        svg *::-webkit-selection {
            background: transparent;
        }
        rect.selection {
            stroke: #333;
            stroke-dasharray: 4px;
            stroke-opacity: 0.5;
            fill: transparent;
        }
        rect.cell-border {
            stroke: #eee;
            stroke-width: 0.3px;
        }
        rect.cell-selected {
            stroke: rgb(51, 102, 153);
            stroke-width: 0.5px;
        }
        rect.cell-hover {
            stroke: #F00;
            stroke-width: 0.3px;
        }
        text.mono {
            font-size: 9pt;
            font-family: Consolas, courier;
            fill: #aaa;
        }
        text.text-selected {
            fill: #000;
        }
        text.text-highlight {
            fill: #c00;
        }
        text.text-hover {
            fill: #00C;
        }
        .popup {
            position: absolute;
            width: 200px;
            height: auto;
            padding: 10px;
            background-color: white;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
            -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
            -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
            box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
            pointer-events: none;
            z-index: 10000;
        }
        .popup.hidden {
            display: none;
        }
        .popup p {
            margin: 0;
            font-family: sans-serif;
            font-size: 12px;
            line-height: 20px;
        }
    </style>
    
    <div ng-style="{ 'overflow':'auto', 'height':row.height }">
        <heatmap-chart>
        </heatmap-chart>
    </div>
</div>